// import React from 'react';
// import { Button } from 'antd'; // 确保你已安装 antd

// const ShareButton: React.FC = () => {
//   const handleShare = () => {
//     const url = encodeURIComponent(window.location.href); // 当前页面的 URL
//     const title = encodeURIComponent('分享的标题'); // 分享的标题
//     const summary = encodeURIComponent('分享的内容摘要'); // 分享的内容

//     const shareOptions = [
//       {
//         name: 'QQ',
//         url: `https://connect.qq.com/widget/shareqq/index.html?url=${url}&title=${title}&summary=${summary}`
//       },
//       {
//         name: '微信',
//         url: `https://www.jiathis.com/share?url=${url}&title=${title}&summary=${summary}`
//       }
//     ];

//     const shareWindow = window.open('', '_blank', 'width=600,height=400');
//     if (shareWindow) {
//       shareWindow.document.write('<h1>选择分享到：</h1>');
//       shareOptions.forEach(option => {
//         shareWindow.document.write(
//           `<a href="${option.url}" target="_blank" style="display:block; margin:10px 0;">分享到 ${option.name}</a>`
//         );
//       });
//       shareWindow.document.close();
//     }
//   };

//   return (
//     <Button style={{ background: '#e8eaec', marginRight: '10px' }} onClick={handleShare}>
//       分享
//     </Button>
//   );
// };

// export default ShareButton;

// import React from 'react';
// import { Button } from 'antd'; // 确保你已安装 antd

// const ShareButton: React.FC = () => {
//   const handleShare = () => {
//     // 获取指定元素的内容
//     const previewElement = document.getElementById('zhong');
//     const previewContent = previewElement ? previewElement.innerHTML : '';

//     const url = encodeURIComponent(window.location.href); // 当前页面的 URL
//     const title = encodeURIComponent('分享的标题'); // 分享的标题
//     const summary = encodeURIComponent('分享的内容摘要'); // 分享的内容
//     const imageUrl = encodeURIComponent('https://example.com/image.jpg'); // 要分享的图片 URL

//     const shareOptions = [
//       {
//         name: 'QQ',
//         url: `https://connect.qq.com/widget/shareqq/index.html?url=${url}&title=${title}&summary=${summary}&pics=${imageUrl}`
//       },
//       {
//         name: '微信',
//         url: `https://www.jiathis.com/share?url=${url}&title=${title}&summary=${summary}&pics=${imageUrl}`
//       }
//     ];

//     const shareWindow = window.open('', '_blank', 'width=600,height=400');
//     if (shareWindow) {
//       shareWindow.document.write('<h1>选择分享到：</h1>');
//       shareOptions.forEach(option => {
//         shareWindow.document.write(
//           `<a href="${option.url}" target="_blank" style="display:block; margin:10px 0;">分享到 ${option.name}</a>`
//         );
//       });

//       // 添加图片预览
//       shareWindow.document.write('<h2>预览图片：</h2>');
//       shareWindow.document.write(previewContent); // 添加提取的内容
//       // shareWindow.document.write('<h2>预览图片：</h2>');
//       shareWindow.document.write(`<img src="${decodeURIComponent(imageUrl)}" alt="分享图片" style="max-width:100%; height:auto;" />`);

//       shareWindow.document.close();
//     }
//   };

//   return (
//     <Button style={{ background: '#e8eaec', marginRight: '10px' }} onClick={handleShare}>
//       分享
//     </Button>
//   );
// };

// export default ShareButton;

import React, { useState } from 'react';
import { Button } from 'antd'; // 确保你已安装 antd

const ShareButton: React.FC = () => {
  const [scale, setScale] = useState(1); // 初始化缩放比例

  const handleShare = () => {
    // 获取指定元素的内容
    const previewElement = document.getElementById('zhong');
    const previewContent = previewElement ? previewElement.innerHTML : '';

    const url = encodeURIComponent(window.location.href); // 当前页面的 URL
    const title = encodeURIComponent('分享的标题'); // 分享的标题
    const summary = encodeURIComponent('分享的内容摘要'); // 分享的内容
    const imageUrl = encodeURIComponent('https://example.com/image.jpg'); // 要分享的图片 URL

    const shareOptions = [
      {
        name: 'QQ',
        url: `https://connect.qq.com/widget/shareqq/index.html?url=${url}&title=${title}&summary=${summary}&pics=${imageUrl}`
      },
      {
        name: '微信',
        url: `https://www.jiathis.com/share?url=${url}&title=${title}&summary=${summary}&pics=${imageUrl}`
      }
    ];

    const shareWindow = window.open('', '_blank', 'width=600,height=400');
    if (shareWindow) {
      shareWindow.document.write('<h1>选择分享到：</h1>');
      shareOptions.forEach(option => {
        shareWindow.document.write(
          `<a href="${option.url}" target="_blank" style="display:block; margin:10px 0;">分享到 ${option.name}</a>`
        );
      });

      shareWindow.document.write('<h2>预览图片：</h2>');
      shareWindow.document.write(previewContent); // 添加提取的内容
      // 添加图片预览和缩放功能
      shareWindow.document.write(`
        <h2>预览内容：</h2>
        <div id="previewContainer" style="text-align: center;">
          <div style="display: inline-block; overflow: hidden;">
            <img id="previewImage" src="${decodeURIComponent(imageUrl)}" style="max-width: 100%; transform: scale(${scale}); transition: transform 0.2s;" />
          </div>
          <div>
            <button onclick="document.getElementById('previewImage').style.transform='scale(' + (Math.min(3, Math.max(0.1, parseFloat(getComputedStyle(document.getElementById('previewImage')).transform.split(',')[0].replace('matrix(', '').replace(')', '').split(' ')[0]) + 0.1))) + ')';">放大</button>
            <button onclick="document.getElementById('previewImage').style.transform='scale(' + (Math.min(3, Math.max(0.1, parseFloat(getComputedStyle(document.getElementById('previewImage')).transform.split(',')[0].replace('matrix(', '').replace(')', '').split(' ')[0]) - 0.1))) + ')';">缩小</button>
          </div>
        </div>
      `);

      // shareWindow.document.write(previewContent); // 添加提取的内容
      shareWindow.document.close();
    }
  };

  return (
    <Button style={{ background: '#e8eaec', marginRight: '10px' }} onClick={handleShare}>
      分享
    </Button>
  );
};

export default ShareButton;